<template>
    <div class="app-content">
        <el-card class="search-card" shadow="never">
            <!-- 搜索部分 -->
            <el-row :gutter="10" class="search-section">
                <el-col :span="7">
                    <el-form-item label="所属租户：">
                        <el-select v-model="searchData.tenantIdList" multiple filterable clearable placeholder="选择租户"
                            style="width: 240px">
                            <el-option v-for="tenant in allDeptInfo" :key="tenant" :label="tenant.tenantName"
                                :value="tenant.tenantId" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="所属项目：">
                        <el-select v-model="searchData.projectList" multiple filterable clearable placeholder="选择项目"
                            style="width: 240px">
                            <el-option v-for="project in allProjectInfo" :key="project" :label="project.projectName"
                                :value="project.projectId" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="负责人：">
                        <el-input v-model="searchData.assignedName" placeholder="负责人用户名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="状态">
                        <el-select v-model="searchData.taskStatus" placeholder="任务状态">
                            <el-option label="未开始" value="0"></el-option>
                            <el-option label="进行中" value="1"></el-option>
                            <el-option label="已完成" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row :gutter="10" class="search-section2">
                <el-col :span="9">
                    <el-form-item label="截止时间：">
                        <div class="block">
                            <el-date-picker v-model="searchData.createTimeList" type="daterange" unlink-panels
                                range-separator=">>" start-placeholder="开始日期" end-placeholder="结束日期"
                                :shortcuts="shortcuts" />
                        </div>

                    </el-form-item>

                </el-col><el-col :span="5">
                    <el-form-item label="任务类型">
                        <el-select v-model="searchData.taskType" placeholder="任务类型">
                            <el-option label="功能点分析" value="1"></el-option>
                            <el-option label="造价综合评估" value="2"></el-option>
                            <el-option label="报告审核" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="优先级">
                        <el-select v-model="searchData.priority" placeholder="任务优先级">
                            <el-option label="低" value="0"></el-option>
                            <el-option label="中" value="1"></el-option>
                            <el-option label="高" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-button type="primary" class="action-button" @click="search" :icon="Search">搜索</el-button>
                    <el-button @click="reset" type="primary" class="action-button" :icon="Refresh">重置</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="search-card" shadow="never" style="margin-top: 10px;">
            <!-- 操作按钮组 -->
            <div class="button-group">
                <el-button v-role="['ROLE_admin', 'ROLE_super']" class="action-button" type="primary" :icon="Edit" @click="handleAdd">增加</el-button>
                <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none"
                    accept=".xlsx,.xls,.csv" />
                <el-button class="action-button" type="primary" :icon="Download" @click="handleExport">导出</el-button>

            </div>
            <!--任务卡片  -->
            <div class="task-container">
                <task-card v-for="task in tasks" :key="task.taskId" :task="task" @edit="handleCardEdit"
                    @delete="handleCardDelete"  @update:task="updateTask" />
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination class="pagination-fixed" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="pagination.currentPage"
                    :page-sizes="[4, 8, 12, 16, 20]" :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next" :total="pagination.totalNum">

                </el-pagination>
            </div>
        </el-card>
        <!-- 对话框 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600" :before-close="handleClose" @open="onOpen"
            @close="onClose" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
            <el-segmented v-model="segmentValue" :options="menuoOptions" size="large" />

            <template #footer>
                <div class="dialog-footer">
                    <el-button class="action-button" type="info" @click="dialogVisible = false">取消</el-button>
                    <el-button class="action-button" type="primary" @click="update()">
                        确认
                    </el-button>
                </div>
            </template>

            <el-form ref="dialogForm" style="max-width: 600px; margin-left: 30px;" :model="taskForm" :rules="rules"
                label-width="auto" class="el-form" status-icon>

                <div v-show="segmentValue === 'basic'">
                    <el-form-item label="任务名称" prop="taskName">
                        <el-input v-model="taskForm.taskName" style="width: 200px;" />
                    </el-form-item>
                    <el-form-item label="任务描述" prop="description">
                        <el-input v-model="taskForm.description" style="width: 200px;" />
                    </el-form-item>
                    <el-form-item label="任务类型" prop="taskType" required>
                        <el-select v-model="taskForm.taskType" placeholder="任务类型" style="width: 200px;">
                            <el-option label="功能点分析" value="1"></el-option>
                            <el-option label="造价综合评估" value="2"></el-option>
                            <el-option label="报告审核" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="任务状态" prop="taskStatus" required>
                        <el-radio-group v-model="taskForm.taskStatus">
                            <el-radio value="0">未开始</el-radio>
                            <el-radio value="1">进行中</el-radio>
                            <el-radio value="2">已完成</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="优先级" prop="priority">
                        <el-radio-group v-model="taskForm.priority">
                            <el-radio value="0">低</el-radio>
                            <el-radio value="1">中</el-radio>
                            <el-radio value="2">高</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="截止日期" prop="dueDate">
                        <el-date-picker v-model="taskForm.dueDate" type="date" placeholder="选择日期"
                            style="width: 200px;" />
                    </el-form-item>
                </div>
                <div v-show="segmentValue === 'belong'">
                    <el-form-item label="所属租户：" v-show="dialogType == true" required>
                        <el-select v-model="taskForm.tenantId" filterable clearable placeholder="选择租户"
                            style="width: 240px">
                            <el-option v-for="tenant in allDeptInfo" :key="tenant" :label="tenant.tenantName"
                                :value="tenant.tenantId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属项目：" v-show="dialogType == true" required>
                        <el-select v-model="taskForm.projectId" filterable clearable placeholder="选择项目"
                            style="width: 240px">
                            <el-option v-for="project in allProjectInfo" :key="project" :label="project.projectName"
                                :value="project.projectId" />
                        </el-select>
                    </el-form-item>
                   
                    <el-form-item label="所属租户：" prop="tenantName" v-show="dialogType == false">
                        <el-input v-model="taskForm.tenantName" style="width: 200px;" readonly />
                    </el-form-item>
                    <el-form-item label="所属项目：" prop="projectName" v-show="dialogType == false">
                        <el-input v-model="taskForm.projectName" style="width: 200px;" readonly />
                    </el-form-item>
                    <el-form-item label="前置任务：">
                        <el-select v-model="taskForm.preTask" filterable clearable placeholder="选择项目"
                            style="width: 240px">
                            <el-option v-for="task in preProjectInfo" :key="task" :label="task.taskName"
                                :value="task.taskId" />
                        </el-select>
                    </el-form-item>

                </div>
                <!-- 新增 dialogType是true-->
                <div v-if="segmentValue === 'assign'">
                    <el-form-item label="分配任务" v-if="dialogType == true">
                        <UserRoleCard :roles="rolesData" @invite-user="onInviteUser" @delete-user="onDeleteUser" />
                    </el-form-item>

                    <el-form-item label="任务分配" v-if="dialogType == false">
                        <UserCard v-for="user1 in userList" :key="user1.userId" :user="user1"
                            @delete-user="handleDeleteUser" />
                        <div style="margin-top: 5px;">
                            <UserRoleCard :roles="editRolesData" @invite-user="onInviteUser"
                                @delete-user="onDeleteUser" />
                        </div>
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch, reactive, onMounted } from 'vue'
import type { User } from '../../type/User';
import type { PaginationData } from '../../type/PaginationData';
import { ElMessage, ElMessageBox, ElNotification, FormInstance, FormRules } from 'element-plus';
import {  Edit, Search,  Download, Refresh} from '@element-plus/icons-vue'
import { getAllTenantInfo } from '../../api/Tenant/tenantApi';
import {  importUserInfo } from '../../api/Tenant/userApi';
import { Tenant } from '../../type/Tenant';
import type { TaskDTO } from '../../type/Task';
import TaskCard from '../../components/Tenant/TaskCard.vue';
import UserRoleCard from '../../components/Tenant/UserRoleCard.vue';
import UserCard from '../../components/Tenant/UserCard.vue';
import { Project } from '../../type/Project';
import { getProjectList, findProjectById } from '../../api/Tenant/projectApi';
import { getTaskInfo, searchTaskInfo, findUserTaskByProjectId, getUsersByType, findUserByProjectTask, updateProgress, inviteUserInEdit, updateTaskForm, removeUserTask, deleteTaskUser ,getPreTaskInfo,findByPreTaskId,exportTaskInfo} from '../../api/Tenant/taskApi';
import { Role } from '../../type/Role';


//----------------------------------
const tasks = ref<TaskDTO[]>([]);

//查询数据
const searchData = ref({
    assignedName: "",
    projectList: [],
    taskStatus: "",
    createTimeList: [],
    tenantIdList: [],
    priority: "",
    taskType: ""
});


//分页
const isSearch = ref(false); // 判断是否为搜索状态
const pagination = ref<PaginationData<User>>({
    currentPage: 1,
    pageSize: 4,
    totalNum: 10,
    isMore: 0,
    totalPage: 0,
    startIndex: 0,
    items: []
});
//当每页条数发生了变化，调用此函数
const handleSizeChange = async (val: number) => {
    pagination.value.pageSize = val;
    pagination.value.currentPage = 1; // 切换每页条数时重置为第一页
    if (isSearch.value) {
        await search();  // 如果是搜索状态，调用搜索
    } else {
        await getTaskData();  // 否则调用常规获取数据
    }
};
//当前页码发生变化，调用此函数
const handleCurrentChange = async (val: number) => {
    pagination.value.currentPage = val;
    if (isSearch.value) {
        await search();  // 如果是搜索状态，调用搜索
    } else {
        await getTaskData();  // 否则调用常规获取数据
    }
};

// ---------------------
const getTaskData = async () => {
    const res = await getTaskInfo(pagination.value?.currentPage, pagination.value?.pageSize);
    const data = res;
    // 更新表格数据
    tasks.value = data.items;

    // 更新分页信息
    pagination.value.currentPage = data.currentPage;
    pagination.value.pageSize = data.pageSize;
    pagination.value.totalNum = data.totalNum;
    pagination.value.isMore = data.isMore;
    pagination.value.totalPage = data.totalPage;
    pagination.value.startIndex = data.startIndex;

};
getTaskData();




const allDeptInfo = ref<Tenant[]>()
const allProjectInfo = ref<Project[]>()


//获取租户数据
const getTenantData = async () => {
    const res = await getAllTenantInfo();
    allDeptInfo.value = res;
}
getTenantData();

//获取项目数据
//如果tenantIdList有值的话，就根据租户id查询项目
const getProjectData = async () => {
    if (searchData.value.tenantIdList.length > 0) {
        const res = await findProjectById(searchData.value.tenantIdList);
        allProjectInfo.value = res;
    } else {
        const res = await getProjectList();
        allProjectInfo.value = res;
    }
}
getProjectData();
//使用 watch 来监听 searchData.tenantIdList 的变化
watch(
    () => searchData.value.tenantIdList,
    () => {
        // 当 tenantIdList 发生变化时，重新获取项目数据
        getProjectData();
        searchData.value.projectList = [];
    }
);


//日期选择器
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]


//------------搜索----------------
const search = async () => {
    isSearch.value = true;
    const res = await searchTaskInfo(pagination.value.currentPage, pagination.value.pageSize, searchData.value);

    // 更新表格数据
    tasks.value = res.items;

    // 更新分页信息
    pagination.value.currentPage = res.currentPage;
    pagination.value.pageSize = res.pageSize;
    pagination.value.totalNum = res.totalNum;
    pagination.value.isMore = res.isMore;
    pagination.value.totalPage = res.totalPage;
    pagination.value.startIndex = res.startIndex;
}
const reset = async () => {
    isSearch.value = false;
    searchData.value.assignedName = "";
    searchData.value.taskStatus = "";
    searchData.value.createTimeList = [];
    searchData.value.tenantIdList = [];
    searchData.value.projectList = [];
    await getTaskData();
}

// --------------任务卡片操作----------------
const editRolesData = ref<Role[]>([]);

const handleCardEdit = async (task: TaskDTO) => {
    dialogTitle.value = '编辑任务'
    dialogType.value = false;
    setTimeout(() => {
        dialogForm.value?.clearValidate()
    }, 100)

    const res = await findUserTaskByProjectId(task.taskId!);
    userList.value = res.userList || [];

    // 获取ProjectDTOs对象
    const res1 = await getUsersByType(task);
    editRolesData.value = res1.roles || [];

    taskForm.value = { ...task };
    preProjectInfo.value=await getPreTaskInfo(taskForm.value);
    dialogVisible.value = true;
};

const handleCardDelete = async (task: TaskDTO) => {
    ElMessageBox.confirm(`确定删除 ${task.taskName} 任务吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            await deleteTaskUser(task);
            ElMessage.success('任务删除成功');
            await getTaskData();
        })
        .catch(() => {
            ElMessage.info('已取消删除');
        });

};



// 更新任务进度的方法
const updateTask = async (updatedTask: TaskDTO) => {
    //判断前置任务是否存在
    if(updatedTask.preTask){
        const preTaskDTO=ref<TaskDTO>({} as TaskDTO);
        preTaskDTO.value.taskId=updatedTask.preTask;
        const preTask=await findByPreTaskId(preTaskDTO.value);
        const progress=preTask.progress;
        if(progress<100){
            ElMessage.error('前置任务尚未完成');
            return;
        }
    }

    const index = tasks.value.findIndex(task => task.taskId === updatedTask.taskId);
    if (index !== -1) {
        tasks.value[index] = updatedTask;
    }
    await updateProgress(updatedTask);
    ElMessage.success('任务进度更新成功');
    getTaskData();
};


// -----------对话框新增操作----------
const rolesData = ref<Role[]>([]);
const getProjectUserRole = async (projectId: string, taskType: string) => {
    const res = await findUserByProjectTask(projectId, taskType);
    rolesData.value = res.roles || [];
};
//前置任务
const  preProjectInfo=ref<TaskDTO[]>()
// 设置 watch 监听器
const setupWatcher = () => {
    watch(
        () => taskForm.value.projectId,
        async (newProjectId) => {
            if (dialogType.value) { // 确保 dialogType 为 true
                rolesData.value = []; // 清空现有的 rolesData
                if (newProjectId) {
                    if (!taskForm.value.taskType) {
                        taskForm.value.taskType = '1';
                    }
                    await getProjectUserRole(newProjectId, taskForm.value.taskType);
                    preProjectInfo.value=await getPreTaskInfo(taskForm.value);
                }
            }
        },
        {
            immediate: false, // 不在初始化时立即触发
            deep: false, // 浅层监听
        }
    );

};

// 使用 onMounted 确保组件挂载后再设置监听器
onMounted(() => {
    setupWatcher();
});
const flag = ref(false);
// 处理邀请用户事件
const onInviteUser = async (payload: { role: Role; user: User }) => {
    const { role, user } = payload;
    const newTaskId = ref('');
    if (dialogType.value) {
        // 新增的情况下，需要先把任务的基础信息填了，再邀请用户
        try {
            const valid = await dialogForm.value?.validate();
            if (valid) {
                newTaskId.value = await inviteUserInEdit(taskForm.value, role, user);
                flag.value = true;
            } else {
                // 验证失败的情况下，显示错误信息
                ElMessage.error('请检查输入项');
            }
        } catch (error) {
            // 捕获验证失败时的错误
            ElMessage.error('请检查输入项');
            return;

        }
    } else {
        newTaskId.value = await inviteUserInEdit(taskForm.value, role, user);
    }

    //重新获取用户列表
    //新增的时候，taskForm.value.taskId是空的，后端根据这个判断是否需要新增一条task记录
    const res = await findUserTaskByProjectId(taskForm.value.taskId ? taskForm.value.taskId : newTaskId.value);
    userList.value = res.userList || [];

    const res1 = await getUsersByType(taskForm.value);
    editRolesData.value = res1.roles || [];

    //如果是新增，点击邀请按钮后，移除用户
    if (dialogType.value) {
        const roleId = role.roleId;
        const userId = user.userId;

        rolesData.value = rolesData.value.map((role) => {
            if (role.roleId === roleId) {
                return {
                    ...role,
                    users: role.users?.filter((user) => user.userId !== userId),
                };
            }
            return role;
        });
    }
    ElNotification({
        title: '邀请成功',
        message: `已邀请${user.username}成为该任务的${role.roleName}!`,
        type: 'success',
    });

};

//处理卡片中删除用户事件
const onDeleteUser = (payload: { roleId: string; userId: string }) => {
    const { roleId, userId } = payload;

    if (dialogType.value == false) {
        ElNotification({
            title: '删除失败',
            message: `该用户 ${userId}尚未参与该任务！`,
            type: 'success',
        });
    } else {
        // 实现删除用户的逻辑，例如调用 API 并更新状态
        rolesData.value = rolesData.value.map((role) => {
            if (role.roleId === roleId) {
                return {
                    ...role,
                    users: role.users?.filter((user) => user.userId !== userId),
                };
            }
            return role;
        });
        ElNotification({
            title: '删除成功',
            message: `已从角色 ${roleId} 中删除用户 ${userId}`,
            type: 'success',
        });
    }
};

// ----------对话框编辑操作-----------
const userList = ref<User[]>([]);

//处理删除用户事件
const handleDeleteUser = async (userId: string) => {

    // 在编辑界面删除用户
    await removeUserTask(taskForm.value, userId);

    const res1 = await getUsersByType(taskForm.value);
    editRolesData.value = res1.roles || [];
    // 在实际应用中，您可能需要调用 API 来删除用户
    // 这里简化为从列表中移除用户
    userList.value = userList.value.filter((user) => user.userId !== userId);

    ElNotification({
        title: '删除成功',
        message: `已删除用户ID: ${userId}`,
        type: 'success',
    });


};


// 处理顶部按钮操作
const handleAdd = async () => {
    dialogTitle.value = '发布任务'
    // 重置表单
    taskForm.value = {}
    flag.value = false;
    // 重置验证规则，避免触发验证 需要用setTimeout包裹
    setTimeout(() => {
        dialogForm.value?.clearValidate()
    }, 100)
    dialogType.value = true
    dialogVisible.value = true
}



const update = async () => {
    try {
        const valid = await dialogForm.value?.validate();
        if (valid) {
            if(dialogType.value){
                console.log('新增任务',flag.value);
                if(flag.value==false){
                    ElMessage.error('请选择任务负责人！');
                    return;
                }
            }
            /* if(taskForm.value.userList==null){
                ElMessage.error('请选择任务负责人！');
                return;
            } */

            await updateTaskForm(taskForm.value);
            ElMessage.success('任务更新成功');
            dialogVisible.value = false
            // 重置验证规则，避免触发验证 需要用setTimeout包裹
            setTimeout(() => {
                dialogForm.value?.clearValidate()
            }, 100)
            await getTaskData();
        } else {
            // 验证失败的情况下，显示错误信息
            ElMessage.error('请检查输入项');
        }
    } catch (error) {
        // 捕获验证失败时的错误
        ElMessage.error('请检查输入项');

    }
}

//----------导入部分--------
const fileInput = ref<HTMLInputElement | null>(null);

// 触发文件输入
const handleFileUpload = async (event: Event) => {

    // 在此添加导入操作的逻辑
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];
    if (file) {
        const formData = new FormData();
        formData.append('file', file);
        await importUserInfo(formData);

    }
}

const handleExport = async () => {

    // 在此添加导出操作的逻辑
    await exportTaskInfo();
    ElMessage.success('导出成功');
}



//------------对话框----------------
const dialogVisible = ref(false)
// 在编辑的时候不可以选择租户dialogType:false，新增的时候可以选择租户 dialogType:true
const dialogType = ref(true)
const emit = defineEmits(['dialogUpdated']);
const onOpen = () => {
    emit('dialogUpdated', dialogVisible.value)
}
const onClose = () => {
    emit('dialogUpdated', dialogVisible.value)
}
const dialogTitle = ref('')
const handleClose = (done: () => void) => {
    dialogVisible.value = false
    flag.value = false;
    // 重置验证规则，避免触发验证 需要用setTimeout包裹
    setTimeout(() => {
        dialogForm.value?.clearValidate()
    }, 100)
    done()
}
const segmentValue = ref('basic')

const menuoOptions = [
    {
        label: '基础信息',
        value: 'basic',
    },
    {
        label: '归属信息',
        value: 'belong',
    },
    {
        label: '任务分配',
        value: 'assign',
    }
]
//
const dialogForm = ref<FormInstance>()
const taskForm = ref<TaskDTO>({})

// 监听 taskForm.tenantId 的变化
watch(
    () => taskForm.value.tenantId,
    async () => {
        const tenantId = taskForm.value.tenantId;
        const res = await findProjectById([tenantId || '']);
        allProjectInfo.value = res;
    }
);

const rules = reactive<FormRules<TaskDTO>>({
    taskName: [
        { required: true, message: '请输入任务名称', trigger: 'blur' },
    ],
    taskType: [
        { required: true, message: '请选择任务类型', trigger: 'blur' },
    ],
    taskStatus: [
        { required: true, message: '请选择任务状态', trigger: 'blur' },
    ],
    dueDate: [
        { required: true, message: '请选择截止日期', trigger: 'blur' },
    ]
});




</script>
<style lang="scss" scoped>
@use "sass:color";
$primary-color: #6067eb;
$info-color: #dadcf6;
$button-border-radius: 4px;
$button-padding: 0.5rem 1rem;
$button-font-size: 16px;
$color-hover: color.adjust($primary-color, $lightness: -10%); // 悬浮时的颜色
$color-disabled: color.adjust($primary-color, $lightness: 15%); // 禁用时的颜色
$info-color-hover: color.adjust($info-color, $lightness: -25%); // 悬浮时的颜色

/* 定义一个 mixin 用于公共按钮样式 */
@mixin action-button-style {
    border-radius: $button-border-radius;
    padding: $button-padding;
    font-size: $button-font-size;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;

    /* 覆盖 Element Plus 的 primary 按钮样式 */
    &.el-button--primary {
        background-color: $primary-color;
        border-color: $primary-color;
        color: #fff;

        &:hover,
        &:focus {
            background-color: $color-hover;
            border-color: $color-hover;
            color: #fff;
        }

        &.is-disabled {
            background-color: $color-disabled;
            border-color: $color-disabled;
            color: #fff;
            cursor: not-allowed;
            opacity: 1; // 确保颜色不被 Element Plus 默认的透明度覆盖
        }
    }

    &.el-button--info {
        background-color: $info-color;
        border-color: $info-color;
        color: #fff;

        &:hover,
        &:focus {
            background-color: $info-color-hover;
            border-color: $info-color-hover;
            color: #fff;
        }

        &.is-disabled {
            background-color: $color-disabled;
            border-color: $color-disabled;
            color: #fff;
            cursor: not-allowed;
            opacity: 1; // 确保颜色不被 Element Plus 默认的透明度覆盖
        }
    }

    /* 禁用状态下的样式（针对所有类型的按钮） */
    &:disabled,
    &.is-disabled {
        background-color: $color-disabled;
        border-color: $color-disabled;
        color: #fff;
        cursor: not-allowed;
        opacity: 1; // 覆盖 Element Plus 默认的透明度
    }


}

.action-button {
    @include action-button-style;
}

/* 按钮组样式 */
.button-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 10px;
}

.table-button {
    color: #7e63cd;
    font-size: 14px;
    /* 设置你想要的字体大小 */
    font-weight: bold;
    /* 设置字体加粗 */
}


.search-card {
    border-radius: 10px;

    .block {
        padding: 0px 0;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;

    }

    .block:last-child {
        border-right: none;
    }

}


.pagination-container {
    display: flex;
    margin-top: 25px;
    justify-content: right;
    width: 100%;
    z-index: 1000;
}

.el-segmented {
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: #868cf4;
    --el-border-radius-base: 8px;
    --el-text-color-primary: #fff;
    --el-segmented-item-hover-bg-color: #b2b5f0;
    display: flex;
    justify-content: flex-start;
    /* 左对齐 */
    width: 300px;
    margin-bottom: 20px;
}

.task-container {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    /* 两列之间的间距，可根据需要调整 */
    //justify-content: space-between;
}
</style>